import React, { useState, useEffect, useRef } from "react";
import ProductTab from "../common/product-tab";
import Service from "../common/service";
import NewProduct from "../../shop/common/newProduct";
import Slider from "react-slick";
import { useQuery } from "@apollo/client";
import { gql } from "@apollo/client";
import ImageZoom from "../common/image-zoom";
import DetailsWithPrice from "../common/detail-price";
import Filter from "../common/filter";
import { Container, Row, Col, Media } from "reactstrap";
import { getProductInfo } from "../../../api/api";
import { fileServerUrl } from "../../../config/index.json";


const GET_SINGLE_PRODUCTS = gql`
  query product($id: Int!) {
    product(id: $id) {
      id
      title
      description
      type
      brand
      category
      price
      new
      sale
      discount
      stock
      variants {
        id
        sku
        size
        color
        image_id
      }
      images {
        alt
        src
      }
    }
  }
`;

const LeftSidebarPage = ({ pathId }) => {
  const [productData, setProductData] = useState(null);
  const [imgList, setImgList] = useState([]);

  var { loading, data } = useQuery(GET_SINGLE_PRODUCTS, {
    variables: {
      id: parseInt(pathId),
    },
  });

  const [state, setState] = useState({ nav1: null, nav2: null });
  const slider1 = useRef();
  const slider2 = useRef();

  var products = {
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: true,
    fade: true,
  };
  var productsnav = {
    slidesToShow: 3,
    swipeToSlide: true,
    arrows: false,
    dots: false,
    focusOnSelect: true,
  };

  useEffect(() => {
    setState({
      nav1: slider1.current,
      nav2: slider2.current,
    });
  }, [data]);
  

  const changeColorVar = (img_id) => {
    slider2.current.slickGoTo(img_id);
  };


  // new

  useEffect(() => {
    var imgs = [];
    var input = { productId: pathId }
    getProductInfo(input).then(res => {
      setProductData(res.data);
      if (res.data.product_media1 != "" && res.data.product_media1)
        imgs.push(fileServerUrl + '/' + res.data.product_media1)
      if (res.data.product_media2 != "" && res.data.product_media2)
        imgs.push(fileServerUrl + '/' + res.data.product_media2)
      if (res.data.product_media3 != "" && res.data.product_media3)
        imgs.push(fileServerUrl + '/' + res.data.product_media3)

      if (res.data.product_media1 == "" || !res.data.product_media1) {
        imgs.push(fileServerUrl + '/' + "products/default.jpg");
      }
      if (res.data.product_media2 == "" || !res.data.product_media2) {
        imgs.push(fileServerUrl + '/' + "products/default.jpg");
      }
      if (res.data.product_media3 == "" || !res.data.product_media3) {
        imgs.push(fileServerUrl + '/' + "products/default.jpg");
      }
      setImgList(imgs);
    })
  }, [pathId])

  return (
    <section className="">
      <div className="collection-wrapper">
        <Container>
          <Row>
            <Col sm="3" className="collection-filter">
              {/* <Filter /> */}
              <Service />
              {/* <!-- side-bar single product slider start --> */}
              {/* <NewProduct /> */}
              {/* <!-- side-bar single product slider end --> */}
            </Col>
            <Col lg="9" sm="12" xs="12">
              <Container fluid={true}>
                {/* <Row>
                  <Col cl="12">
                    <div className="filter-main-btn mb-2">
                      <span onClick={filterClick} className="filter-btn">
                        <i className="fa fa-filter" aria-hidden="true"></i>{" "}
                        filter
                      </span>
                    </div>
                  </Col>
                </Row> */}
                {!productData ||
                loading ? (
                  "loading"
                ) : (
                  <Row>
                    <Col lg="6" className="product-thumbnail" style={{ height: "670px" }}>
                      <Slider
                        {...products}
                        // asNavFor={nav2}
                        ref={(slider) => (slider1.current = slider)}
                        className="product-slick"
                      >
                        {imgList.map((url, index) => (
                          <div key={index} style={{ display: 'flex', justifyContent: 'center' }}>
                            <ImageZoom image={url} />
                          </div>
                        ))}
                      </Slider>
                      <Slider
                        className="slider-nav"
                        {...productsnav}
                        // asNavFor={nav1}
                        ref={(slider) => (slider2.current = slider)}
                      >
                        {imgList.length > 0
                          ? imgList.map((url, index) => (
                              <div key={index}>
                                <Media
                                  src={`${url}`}
                                  key={index}
                                  className="img-fluid"
                                />
                              </div>
                            ))
                          : ""}
                      </Slider>
                    </Col>
                    <Col lg="6" className="rtl-text">
                      <DetailsWithPrice
                        item={productData}
                        changeColorVar={changeColorVar}
                      />
                    </Col>
                  </Row>
                )}
              </Container>
              <ProductTab 
                product={productData}
              />
            </Col>
          </Row>
        </Container>
      </div>
    </section>
  );
};

export default LeftSidebarPage;
